ヘッドレスCMSでも自由に記事を組みたい。 ContentfulのComposeでブロックエディター(ライク)に記事を書いてみる！

#Contentful

#jamstack

小西諒

2021.04.26

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

ヘッドレスCMSでは、バックエンドのCMS（記事の管理）とフロント側が切り離されることで、アーキテクチャ全体としてセキュリティを向上させるなど多くのメリットがある一方、CMS側で動的にコンテンツを変化させる構造に弱かったりします。

例えばWordpressのGutenbergのようなブロックエディタでは、編集者に権限さえあれば、自由にテキストやブロックを追加して即座にフロント側にも公開できるのですが、ヘッドレスCMSの場合、フロント側で前もって新しいページの生成ロジックが必要です。

今回はContentfulに新しくリリースされたCompose機能を使い、Contentfulにはデフォルトで存在しない、ブロックエディタライクな記事入稿画面を作ってみます。

前提

この記事は、ContentfulやヘッドレスCMSをある程度使っている人向けです。若干ややこしい説明もでてきます。またフロント側の説明は大きく端折っています（というか通常のフィールドデータの取得と大差がない）。

Contentful Composeとは

公式の説明を読んでみます。

Compose is a new app from Contentful, which takes a page-centric approach to content creation and editing.

何のこっちゃですね。

従来の編集画面と切り離された新機能として存在しておりわかりづらいのですが、触ってみた個人的な感触としては、「関連付けするエントリーすべてを1ページで編集/構成できるようにしたもの」という感じです。

おそらく多くのユーザーが、ページ同士を関連付けさせるReferenceフィールドをよく利用しており、それをContentfulも把握していて、主に使い勝手の面で課題の多かった同機能を別機能として作り直したんじゃないかな？と想像しています。

Composeを使ってみる

Composeアプリのインストール

ContentfulダッシュボードのAppsページにて、Composeをインストールします（ComposeはContentfulの純正アプリという位置付けです）。フリープランでも10日間トライアルで利用できます。

導入

Compose画面に遷移し（https://compose.contentful.com/spaces/[SPACE_ID]/setup）、[Guided setup]から[Install required content types]をクリックすると、Compose専用のContent modelがインストールされます。

この時点でContentfulダッシュボードに戻ると、下記二点のContent modelが追加されているのが確認できます。

Compose: Page
Compose: SEO

これらに対して自分でさらにエントリーフィールドを追加することもできますが、削除は推奨されていない点にご注意ください。

次にページタイプを作成します（Content modelのようなもの）。

[Test Compose Page]としておき、[Create]を押します。

その後、Contentfulの画面に戻り、[Component Text]というContent modelを作成します。これは先ほど作った[Test Compose Page]にブロックテキストを動的に追加するための部品のようなものです。

[Component Text]の中には、[Text]という名前でLong textのフィールドを1つ追加します。

また、Content Modelの中には、先ほどComposeで作成した[Test Compose Page]も追加されているかと思います。

その中に[Texts]というReferenceフィールドを作成します。

1対多の関係にしたいので、[Many References]にチェックを入れます。

また、[Validation]で[Component text]のみをAcceptしておきます。

これで準備は完了です。次にページを追加してみます。

Composeで新規ページの追加

Composeダッシュボードに写り、左サイドバーからページの新規作成ページに遷移します。

ようやくテキストブロックを追加するステップまでやってきました。[Add content to Test Compose Page]というボタンから[Component Text]としてテキストブロックを追加できます。

この[Component Text]は、必要な分だけ追加できます。上限数はフリープランでも1000なので、まぁ問題にはならなそう。

ちなみに本文を表現する[Content]タブとは別途、[Page Settings]タブがあり、そこではページのタイトルやSEO部分の入力が可能です。

noindexを指定するフィールドなんかも生成されてますが、フロントからContentfulにクエリを投げるとフラグとして取得できるだけなので、noindexの処理はフロント側で自分で実装する必要があります。

準備ができたら[Publish]を押します。Contentful的には、動的に追加したブロックの一つ一つは1エントリーという単位になるのでそれぞれに公開ステータスがありますが、ここではまとめて公開できます。

これで記事が公開できました。

どうやって情報を取得するか

Gatsbyの例ですが、GraphQLで下記のように直感的に取得できます。

フロント側ではmap関数で表示する処理などをしておけば、動的なコンテンツの追加に対応できると思います。

ちなみにGatsbyの場合は gatsby-source-contentful のパッケージを使っている人がほとんどだと思いますが、v3.1.1ではデータが取得できず（GraphQLに表示されない）、私の場合はv5.3.0にアップロードすることで解決しました。Composeが新しい機能なので、できるだけ新しいバージョンのパッケージを使いましょう。